import React from 'react';
import {Bar, Column} from '@ant-design/plots';
import {Datum} from "@antv/g2plot";

type ModelProps = {
  stepProductDetail: API.StepProductDetailDTO[] | undefined,
  baseStyle: any,
}
const WIPDistribution: React.FC<ModelProps> = ({stepProductDetail, baseStyle}) => {
  const data = stepProductDetail?.map(item => {
    return {
      type: item.keyProcessName,
      value: item.wipquantity
    }
  })
  const config: any = {
    data,
    xField: 'value',
    yField: 'type',
    seriesField: '',
    legend: false,
    xAxis: {
      label: {
        autoHide: false,
        autoRotate: false,
      },
    },
    color: "orange",
    label: {
      // 可手动配置 label 数据标签位置
      // 'top', 'bottom', 'middle',
      // 配置样式
      style: {
        fill: '#FFFFFF',
        opacity: 0.8,
      },
    },
    height: 210,
    tooltip: {
      showTitle: false,
      formatter: (datum: Datum) => {
        return {name: datum.type, value: datum.value };
      },
    },
  };
  return (
    <div key={2} style={{...baseStyle, width: "50%"}}>
      <div style={{textAlign: "center", color: "red", padding: 5}}>产线WIP分布</div>
      <Bar {...config}/>
    </div>
  );
};
export default WIPDistribution;
